<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-12 14:20:18
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-11 10:47:25
 * @FilePath: \test\src\components\BoxTitleBig\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="box1">
    <div class="title_box">
      <div class="title">{{ title }}</div>
      <div class="sub_title" :style="subTitleStyle" @click="subTitleClick">{{ subTitle }}</div>
    </div>
    <div class="container">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script setup name="BoxTitleBig">
defineOptions({
  name: "BoxTitleBig",
});

const emit = defineEmits(['subTitleClick', 'submitFather'])
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "标题",
  },
  subTitle: {
    type: String,
    default: "副标题",
  },
  subTitleStyle:{
    type:Object,
    default:()=>{}
  }
});

function subTitleClick() {
  emit('subTitleClick','1')
}
</script>

<style lang="scss" scoped>
.box1 {
  @include display(space-between, center, column);
  height: 100%;
  .title_box {
    box-sizing: border-box;
    width: 100%;
    height: 88px;
    border-image-source: url("../../assets/images/box_title_in_left.png");
    border-image-slice: 0 390 88 110 fill;
    border-right: 390px solid;
    border-bottom: 88px solid;
    border-left: 110px solid;
    // background-size: 100% 100% !important;
    // background: url(~@/assets/images/box_title_in_left.png);
    position: relative;
    color: #fff;
    .title,
    .sub_title {
      position: absolute;
      cursor: pointer;
    }
    .title {
      font-size: 48px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      top: -20px;
      left: 0px;
    }
    .sub_title {
      font-size: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      bottom: -70px;
      right: -250px;
    }
  }

  .container {
    flex-grow: 1;
    height: 0;
    width: 100%;
  }
}
</style>
